<template>
  <el-select v-model="code" :size="size" class="has-icon" :clearable="clearable" :disabled="disabled" :multiple="multiple"
    :filterable="true" :remote="false" placeholder="输入名称或编码" :remote-method="remoteMethod" :loading="loading"
    @change="selectChange">
    <template v-for="item in list">
      <el-option  :key="item.code" :label="item.name" :value="item.code" v-if="hideList.indexOf(item.code) < 0">
        <span>{{ item.name }}<small style="color: #999;">({{ item.type | tanantSort }})</small></span>
      </el-option>
    </template>
  </el-select>
</template>

<script>
export default {
  props: {
    value: "",
    clearable: {
      type: Boolean,
      default: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    hideList: {
      type: Array,
      default: () => { return [] },
    }
  },
  data() {
    return {
      list: [],
      code: "",
      loading: false,
    }
  },
  created() {
    this.code = this.value;
  },
  mounted() {
    this.remoteMethod(this.value);
  },
  watch: {
    value: function (newValue) {
      this.code = newValue;
    }
  },
  methods: {
    remoteMethod(query) {
      this.loading = true;
      let params = {
        "key": "",
        "pageIndex": 1,
        "pageSize": 1000,
      }
      this.list = [];
      this.https("get", "/api/Tenant/GetTenantName", params).then(res => {
        this.loading = false;
        (res.response.data || []).map(item => {
          if (item.code.indexOf('jj1') < 0) {
            this.list.push(item)
          }
        })
      }).catch(res => {
        this.loading = false;
      })
    },
    selectChange(val) {
      this.$emit('input', val);
      let obj = this.list.find(item => val == item.code);
      this.$emit('change', obj);
    },
  }
}
</script>